import React, { FC, useEffect, useState } from 'react'
import { Button, Drawer, Form, Radio, Select } from 'antd'
import ProCard from '@ant-design/pro-card'
import { Config } from '@utils/Constants'

const FormItem = Form.Item
const formTailLayout = {
  labelCol: { span: 7 },
  wrapperCol: { span: 15 }
}

interface FunGenericProps {
  onSubmit:any,
  onClose:any,
  clickObj:any,
  visible:boolean,
  voList:any,
  funDetail:any,
}

const FunGeneric: FC<FunGenericProps> = (props) => {

  const [form] = Form.useForm()
  const { onSubmit, onClose, clickObj, visible, voList, funDetail } = props
  const [dataTypeObjList, setDataTypeObjList] = useState<any>([])
  const [item, setItem] = useState<any>({})


  useEffect(() => {
    if (visible) {
      let obj = JSON.parse(funDetail.return_vo)
      let list = voList
      if (obj?.dataType === 'base') {
        const arr: any = []
        Config.DATA_TYPE_LIST.map((val) => {
          arr.push({ name: val })
        })
        list = arr
      } else if (obj?.dataType === 'table') {

      }
      setDataTypeObjList(list)
    }
  }, [visible])

  useEffect(() => {
    form.resetFields()
  }, [clickObj, visible])


  const changeVo = (type: string) => {
    if (type === 'vo') {
      setDataTypeObjList(voList)
    } else if (type === 'base') {
      const arr: any = []
      Config.DATA_TYPE_LIST.map((val) => {
        arr.push({ name: val })
      })
      setDataTypeObjList(arr)
    } else if (type === 'table') {
      setDataTypeObjList([])
    }
  }

  const getFileInfo = (val: any) => {
    const dataType = form.getFieldValue('dataType')
    const obj: any = {}
    if (dataType === 'base') {
      obj.name = val
    } else if (dataType === 'vo') {
      const data = dataTypeObjList.filter((res: any) => res.id === val)[0]
      obj.name = data.name
      obj.paradigm = data.paradigm
    }
    setItem(obj)
  }

  const submit = () => {
    // 表单验证
    form.validateFields().then((data) => {
      if (data.dataType === 'base') {
        data.name = data.id
        delete data.id
      } else if (data.dataType === 'vo') {
        const val = dataTypeObjList.filter((res: any) => res.id === data.id)[0]
        data.name = val.name
        data.paradigm = val.paradigm
      }
      onSubmit({ ...data, ...item })
    })
  }

  return (
    <Drawer
      title="泛型选择"
      width={600}
      onClose={() => onClose(false)}
      visible={visible}
      bodyStyle={{ paddingBottom: 80, backgroundColor: '#f0f2f5' }}
      footer={
        <div style={{
          textAlign: 'right'
        }}>
          <Button key="submit" onClick={submit} type="primary">
            保存
          </Button>
          <Button style={{ marginLeft: 10 }} onClick={() => onClose(false)}>
            关闭
          </Button>
        </div>
      }>
      <ProCard>
        <Form form={form} initialValues={clickObj}>
          <FormItem {...formTailLayout} initialValue={clickObj.dataType || 'vo'} name="dataType"
                    rules={[{ required: true, message: '请选择类型' }]} label="类型">
            <Radio.Group onChange={(val) => changeVo(val.target.value)}>
              <Radio.Button value="base">base</Radio.Button>
              <Radio.Button value="table">table</Radio.Button>
              <Radio.Button value="vo">vo</Radio.Button>
            </Radio.Group>
          </FormItem>
          <FormItem {...formTailLayout} name='id' initialValue={clickObj.id || clickObj.name}
                    rules={[{ required: true, message: '请选择Vo对象' }]}
                    label="Vo对象">
            <Select placeholder="请选择Vo对象" style={{ width: '80%' }} onChange={getFileInfo}>
              {dataTypeObjList.map((item: any, index: number) => (
                <Select.Option key={index} value={item.id || item.name}>{item.name}</Select.Option>
              ))}
            </Select>
          </FormItem>
          <FormItem {...formTailLayout} initialValue={clickObj.collectionType || 'single'} name='collectionType'
                    rules={[{ required: true, message: '请选择集合' }]} label="集合">
            <Radio.Group>
              <Radio value="single">单值</Radio>
              <Radio value="list">List</Radio>
              <Radio value="map">Map</Radio>
              <Radio value="set">Set</Radio>
            </Radio.Group>
          </FormItem>
        </Form>
      </ProCard>

    </Drawer>
  )
}

export default FunGeneric
